<%@page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>小型超市管理系统</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .menu-item {
                @apply flex items-center gap-3 px-4 py-3 bg-primary text-white rounded-md mb-2 transition-all duration-200 cursor-pointer;
            }
            .menu-item:hover {
                @apply bg-primary/90 shadow-md transform scale-[1.02];
            }
            .menu-icon {
                @apply w-8 h-8 flex items-center justify-center;
            }
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 定义颜色变量
        const theme = {
            primary: '#4a86e8', // 中等深度蓝色
            secondary: '#36CFC9',
            neutral: '#F5F7FA',
            dark: '#1D2129',
        };
    </script>
</head>

<body class="frame-bd bg-gray-50 font-sans">
    <div class="w-64 h-screen bg-white shadow-lg overflow-y-auto">
        <div class="p-4 border-b border-gray-200 bg-primary/5">
        </div>
        <ul class="left-menu p-3">
            <li>
                <a href="user/listUser" target="mainFrame" class="menu-item">
                    <span class="menu-icon"><i class="fa fa-users"></i></span>
                    <span class="menu-text">系统用户</span>
                </a>
            </li>
            <li>
                <a href="customer/getCustomerList" target="mainFrame" class="menu-item">
                    <span class="menu-icon"><i class="fa fa-user-o"></i></span>
                    <span class="menu-text">客户管理</span>
                </a>
            </li>
            <li>
                <a href="supplier/getAll" target="mainFrame" class="menu-item">
                    <span class="menu-icon"><i class="fa fa-truck"></i></span>
                    <span class="menu-text">供应商管理</span>
                </a>
            </li>
            <li>
                <a href="product/getAll?target=1" target="mainFrame" class="menu-item">
                    <span class="menu-icon"><i class="fa fa-cube"></i></span>
                    <span class="menu-text">商品管理</span>
                </a>
            </li>
            <li>
                <a href="bill/getAll?target=1" target="mainFrame" class="menu-item">
                    <span class="menu-icon"><i class="fa fa-file-text-o"></i></span>
                    <span class="menu-text">账单管理</span>
                </a>
            </li>

            <%--<li>
                <a href="updatePwd.jsp" target="mainFrame" class="menu-item">
                    <span class="menu-icon"><i class="fa fa-key"></i></span>
                    <span class="menu-text">密码修改</span>
                </a>
            </li>--%>
            <li>
                <a  onclick="logout()"  class="menu-item bg-red-500 hover:bg-red-600">
                    <span class="menu-icon"><i class="fa fa-sign-out"></i></span>
                    <span class="menu-text">退出系统</span>
                </a>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        // 菜单高亮功能
        document.addEventListener('DOMContentLoaded', function() {
            const currentPath = window.location.pathname;
            const menuItems = document.querySelectorAll('.left-menu a');

            menuItems.forEach(item => {
                if (item.getAttribute('href') === currentPath) {
                    item.classList.add('active');
                }
            });
        });

        // 退出系统功能
        function logout() {
            if (confirm('确定要退出系统吗？')) {
                // 直接操作顶层框架跳转
                top.location.href = "login.jsp";
                // 可选：清除会话或本地存储
                sessionStorage.clear();
                localStorage.clear();
            }
        }
    </script>
</body>

</html>